<template>
	<view class="main">
		<view class="boxmax">
			<view class="box" v-for="(v,k) in DramacaseList" :key="k" @click="goDetail(v)">
				<view class="box_img">
					<image :src="v.drama.cover" mode="widthFix"></image>
				</view>
				<view class="content">
					<view class="shang">
						  <view class="shang_content" v-if="isClickId ==''">
								{{v.drama.name}}
						</view>
					</view>
					<view class="zhong" v-if="type == 'history'">
						上次观看到第{{v.episode_index}}集
					</view>
					<view class="xia">
						<view class="xia_left">
							<view class="tabs">
								<text class="tab" v-for="(v,k) in v.keyword" :key="k">
									{{v}}
								</text>
							</view>
						</view>
						<view class="xia_right">
							<image src="@/static/delete.svg" mode="" @click.stop="deldramas(v)"></image>
						</view>
					</view>
				</view>
			</view>
			<view class="box">
				<view class="box_img" @click="goBooks" v-if="type == 'favorite'">
					<view class="jia">
						+
					</view>
				</view>
				<view class="content">
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getUserWatchRecordDelete,
		getFavoriteDelete
	} from "@/request/api.js"
	export default {
		name: "Dramacase",
		// computed:{
		// 	isClickId:uni.getStorageSync("clickid")
		// },
		data(){
				return {
					isClickId:uni.getStorageSync("clickid") || '',
				}
			},
		props: {
			DramacaseList: {
				type: Array,
				default: () => []
			},
			type:{
				type: String,
			}
		},
		methods: {
			goDetail(v) {
				console.log(v);
				uni.navigateTo({
					// url: `/pages/Detail/Detail?id=${v.book_id}&chapter_id=${v.chapter_id}`
				 url: `/pages/play/index?drama_id=${v.drama_id}&episode_index=${v.episode_index}`
				})
			},
			goBooks() {
				uni.switchTab({
					url: "/pages/index/index"
				})
			},
			// 删除收藏or观看记录
			async deldramas(v) {
				
				if(this.$props.type == 'history'){
					let ids = []
					ids.push(v.id)
					let res = await getUserWatchRecordDelete({
						ids
					})
				}else{
					let drama_ids = []
					drama_ids.push(v.drama_id)
					let res = await getFavoriteDelete({
						drama_ids
					})
				}
				
				this.$emit('dramacasedramacase')
			},
		}
	}
</script>

<style lang="less" scoped>
	.main {
		width: 100%;

		.boxmax {

			.box {
				height: 228rpx;
				border-radius: 12rpx;
				display: flex;
				justify-content: space-around;
				align-items: center;

				.box_img {
					width: 132rpx;
					height: 172rpx;
					line-height: 172rpx;

					image {
						width: 100%;
						height: 100%;
						border-radius: 20rpx;
					}

					.jia {
						width: 100%;
						height: 100%;
						background-color: #e2e2e2;
						font-size: 60rpx;
						text-align: center;
						border-radius: 12rpx;
					}
				}

				.content {
					width: 70%;
					height: 172rpx;
					display: flex;
					flex-wrap: wrap;
					flex-direction: column;
					justify-content: space-between;

					.shang {

						.shang_content {
							font-weight: 400;
							font-size: 28rpx;
							color: #000000;
							overflow: hidden;
							text-overflow: ellipsis;
							display: -webkit-box;
							-webkit-box-orient: vertical;
							-webkit-line-clamp: 1;
						}
					}

					.zhong {
						font-size: 24rpx;
						color: #666666;
						overflow: hidden;
						text-overflow: ellipsis;
						display: -webkit-box;
						-webkit-box-orient: vertical;
						-webkit-line-clamp: 2;
						line-height: 44rpx;
					}

					.xia {
						width: 100%;
						font-weight: 400;
						font-size: 24rpx;
						color: #BDBDBD;
						display: flex;
						justify-content: space-between;

						.xia_left {
							width: 100%;

							.tabs {

								.tab {
									height: 34rpx;
									border-radius: 8rpx;
									text-align: center;
									font-size: 24rpx;
									line-height: 34rpx;
									margin-right: 10rpx;
									padding: 0 20rpx;
								}

								.tab:nth-child(odd) {
									background: #E0EFEF;
									color: #77A7A2;
								}

								.tab:nth-child(even) {
									background: #FFE0DD;
									color: #F38C93;
								}

							}
						}

						.xia_right {
							width: 10%;
							height: 94%;

							image {
								display: block;
								width: 28rpx;
								height: 32rpx;
							}
						}

					}
				}
			}
		}
	}
</style>